<template>
  <div class="my-info">
    <div class="my-info-form">
      <div class="avatar-username">
        <ChangeAvatar
          :custom="true"
          :headPic="headPic"
          @upload-success="uploadImg"
        >
        </ChangeAvatar>
        <p>{{ username }}</p>
      </div>
      <div>
        <span> 点赞 {{ like }} </span>
        <span style="margin-left: 20px"> 收藏 {{ star }} </span>
      </div>
      <div>
        <el-input
          v-model="nickName"
          @change="changValue"
          :disabled="!editing"
        ></el-input>
        <el-button @click="editNickName">{{
          editing ? "提交" : "编辑"
        }}</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getUserInfo, updateUser } from "@/api/user";
import ChangeAvatar from "./changeAvatar.vue";
import { UpdateUserDto } from "@/interface/user";
import { user } from "@/store";
import { uploadImageToOss } from "@/utils/tools";
import { onMounted, ref } from "vue";
import { findLikeTotal } from "@/api/like";
import { findStarTotal } from "@/api/star";
import { ElMessage, ElNotification } from "element-plus";

const userStore = user();

const headPic = ref<string>("");
const nickName = ref<string>("");
const username = ref<string>("");
const editing = ref<boolean>(false);
const like = ref<number>(0);
const star = ref<number>(0);

const editNickName = async () => {
  if (editing.value) {
    try {
      const param: UpdateUserDto = {};
      if (!nickName.value) {
        return ElMessage.warning("请输入呢称");
      }
      param.nickName = nickName.value;
      const res = await updateUser(param);
      if (res?.status === 201) {
        ElNotification.success({
          title: "Success",
          message: "修改成功",
          offset: 100,
        });
      } else {
        ElNotification.error({
          title: "Failed",
          message: "修改失败",
          offset: 100,
        });
      }
    } catch (error) {}
  }
  editing.value = !editing.value;
};
const uploadImg = async (data: File) => {
  try {
    const url: any = await uploadImageToOss(data, 4);
    if (url) {
      headPic.value = url;
    }
    const res = await updateUser({ headPic: headPic.value });
    if (res?.status === 201) {
      ElNotification.success({
        title: "Success",
        message: "修改头像成功",
        offset: 100,
      });
      const userInfo:any = userStore.getUserInfo;
      userInfo.headPic = headPic.value;
      await userStore.setUserInfo(userInfo);
      await userStore.setHeadPic(headPic.value);
    } else {
      ElNotification.error({
        title: "Failed",
        message: "修改头像失败",
        offset: 100,
      });
    }
  } catch (error) {}
};

const changValue = (value: string) => {
  nickName.value = value;
};

// const getLike = async () => {
//   try {
//     const { data } = await findLikeTotal();
//     console.log(data);
//   } catch (error) {
//     console.log(error)
//   }
// };

onMounted(async () => {
  try {
    const userRes = await getUserInfo();
    if (userRes?.status === 200) {
      headPic.value = userRes?.data?.headPic || "";
      nickName.value = userRes?.data?.nickName || "";
      username.value = userRes?.data?.username || "";
    }
    const likeRes = await findLikeTotal();
    const starRes = await findStarTotal();
    if (likeRes?.status === 201) {
      like.value = likeRes?.data?.total;
    }
    if (starRes?.status === 201) {
      star.value = starRes?.data?.total;
    }
  } catch (error) {
    console.log(error);
  }
});
</script>
<style lang="scss" scoped>
.my-info {
  @include flex();
  height: 100vh;
  .my-info-form {
    width: 30rem;
    height: 30rem;
    border: 1px solid rgb(224, 224, 220);
    border-radius: 10px;
    @include flex($space-around,$center,$column);
    box-shadow: 5px 5px 2px 2px rgb(224, 224, 220);
    .avatar-username {
      text-align: center;
    }
  }
}
</style>
